<template>
	<view class="box-main">
		<view class="mt-30">
			<input maxlength="50" placeholder="请输入标题" v-model="form.title" />
		</view>
		<view class="mt-30 mb-30" style="width: 98%;height: 1rpx;background-color: #ECECEC;"></view>
		<view>
			<textarea maxlength="500" style="width: 100%;height: 600rpx;" placeholder="请输入正文" v-model="form.content" />
		</view>
		<view class="wfc mla mt-20">
			<text>{{form.content.length}}/500</text>
		</view>

		<!-- 图片 -->
		<drag-image :number='9' :borderRadius='20' v-model='imgList'>
			<template v-slot:upload>
				<view v-if="imgList.length < 9" @click.stop="uploadImg" class='box-upload'>
					<text class='iconfont icon-icon25201' style="font-size: 60rpx;"></text>
					<view>上传图片</view>
				</view>
			</template>
		</drag-image>

		<view>
			<text class="c-999 fs-26 ml-20">tips:拖动排序</text>
		</view>
		
		<view style="height: 200rpx;">
		</view>

		<!-- 底部发送按钮 -->
		<view class="box-btn-send">
			<view class="flex ac">
				<view @click.stop="uploadImg" class="flex ac fc jc ml-30">
					<view>
						<text class="iconfont icon-xiangji "></text>
					</view>
					<view class="fs-26">
						图片
					</view>
				</view>
				<view v-if="!currentLabel" @click="openPopup" class="flex ac fc jc ml-30">
					<view>
						<text class="iconfont-yjgs">
							&#xe886;
						</text>
					</view>
					<view class="fs-26">
						类型
					</view>
				</view>
				<view v-else class="ml-30 pos-r">
					<view v-if="currentLabel == '需求'" @click="openPopup">
						<view class="box-item-pop fw" style="border-radius: 6rpx;">
							{{currentLabel || ''}}
						</view>
					</view>
					<view v-if="currentLabel == '供应'" @click="openPopup">
						<view class="box-item-pop fw"
							style="background-color: #FFE7E6;color: #D22C25;border-radius: 6rpx;">
							{{currentLabel || ''}}
						</view>
					</view>
					<text @click.stop="deleteLabel" class="iconfont icon-guanbi1 pos-a box-fom-close"
						style="font-size: 40rpx;top: -15rpx;"></text>
				</view>
			</view>
			<view @click="sendSubmit" class="box-btn-submit">
				发布
			</view>
		</view>
		<!-- end -->
			
			
		<uni-popup :mask-click='false' :is-mask-click='false' ref="popup" background-color="rgba(0,0,0,0)"
			:safeArea="true">
			<view class="box-popup">
				<view class="fw tc fs-32 mb-20">
					<text>请选择类型</text>
				</view>
				<view class="flex ww ac jc" style="gap: 20rpx;">
					<view @click="selectLabel('需求')">
						<view class="box-item-pop fw" style="border-radius: 6rpx;">
							需求
						</view>
					</view>
					<view @click="selectLabel('供应')">
						<view class="box-item-pop fw"
							style="background-color: #FFE7E6;color: #D22C25;border-radius: 6rpx;">
							供应
						</view>
					</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
	import dragImage from '@/pages/extend/components/shmily-drag-image/components/shmily-drag-image/shmily-drag-image.vue'
	import {
		cardCardInfoSave,
		cardCardInfoDetail
	} from "@/api/extend";
	export default {
		components: {
			dragImage
		},
		data() {
			return {
				options: {},
				currentLabel: '',
				imgList: [],
				form: {
					title: '',
					content: ''
				}
			}
		},
		onLoad(options) {
			this.options = options;
			if (options.id) {
				this.cardCardInfoDetailFunc();
			}
		},
		onReady() {
			if (!this.options.id) {
				this.$nextTick(() => {
					this.openPopup();
				})
			}
		},
		methods: {
			cardCardInfoDetailFunc() {
				cardCardInfoDetail({
					id: this.options.id
				}).then(res => {
					this.form.title = res.data.title
					this.form.content = res.data.content
					this.imgList = this.$timer.strToArr(this.$timer.ensureUrl(res.data.images))
					this.currentLabel = res.data.type == 1 ? '供应' : '需求'
				})
			},
			deleteLabel() {
				this.currentLabel = null;
			},
			selectLabel(name) {
				this.currentLabel = name;
				this.$refs.popup.close();
			},
			sendSubmit() {
				if (!this.form.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return;
				}
				if (!this.form.content) {
					uni.showToast({
						title: '请输入正文',
						icon: 'none'
					})
					return;
				}
				if (!this.currentLabel) {
					uni.showToast({
						title: '请选择标签',
						icon: 'none'
					})
					this.openPopup();
					return;
				}

				cardCardInfoSave({
					title: this.form.title,
					content: this.form.content,
					images: this.imgList ? this.imgList.join(',') : '', // 图片
					type: this.currentLabel == '供应' ? 1 : 2,
					video: '',
					id: this.options.id
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
					})
					if (res.status == 200) {
						uni.$emit('sendNeedRefer')
						setTimeout(() => {
							uni.navigateBack({
								fail() {
									uni.redirectTo({
										url:'/pages/connection/index'
									})
								}
							});
						}, 2000)
					}
				})

			},

			deleteImg(index) {
				this.imgList.splice(index, 1);
			},
			preViewImg(item, index) {
				uni.previewImage({
					urls: this.imgList,
					current: index
				})
			},
			uploadImg() {
				if (this.imgList.length == 9) {
					uni.showToast({
						title: '最多只能上传9张图片',
						icon: 'none'
					})
					return;
				}

				this.$util.uploadImageOne({
					url: 'upload/image',
					count: 9
				}, (res) => {
					if (Array.isArray(res)) {
						this.imgList = [...this.imgList, ...res]
					}
				});
			},
			openPopup() {
				this.$refs.popup.open('bottom')
			}
		},

	}
</script>

<style lang="scss" scoped>
	.box-upload {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 204rpx;
		height: 204rpx;
		border: 1rpx solid #808080;
		border-radius: 20rpx;
	}

	.box-item-pop {
		border-radius: 40rpx;
		line-height: 60rpx;
		height: 60rpx;
		width: fit-content;
		font-size: 26rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		color: #2965FF;
		background-color: rgba(77, 126, 251, .25);

	}

	.box-popup {
		border-radius: 18rpx;
		overflow: hidden;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		height: 26vh;
		width: 100%;
	}

	.box-btn-submit:active {
		opacity: .5;
	}

	.box-btn-submit {
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		border-radius: 40rpx;
		width: 120rpx;
		height: 60rpx;
		background-color: #000000;
		color: white;
	}

	.box-btn-send {
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #F3F3F3;
		z-index: 9999;
		left: 0;
		box-shadow: 1px -3px 20rpx rgba(0, 0, 0, .12), 0 0 3rpx rgba(0, 0, 0, .04);
		color: #292929;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); ///兼容 IOS<11.2/
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); ///兼容 IOS>11.2/
		height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.box-fom-close {
		top: -23rpx;
		right: -16rpx;
		position: absolute;
	}

	.box-for-img {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20rpx;
	}

	.box-main {
		box-sizing: border-box;
		min-height: 100vh;
		padding: 30rpx;
		background-color: #FFFFFF;
	}
</style>